<template>
  <div class="map-box">
    <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!--略缩图-->
      <!--      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>-->
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!--自定义控件1（城市筛选）-->
      <bm-control class="map-btn map-btn-city">
        <a-button v-for="item in buttonList"
                  size="large"
                  @click="taggerCity(item)"
                  :key="item.id"
                  :type="activeCity===item.id?'primary':'default'">
          {{item.title}}
        </a-button>
      </bm-control>
      <!--自定义控件2（状态筛选）-->
      <bm-control class="map-btn map-btn-filter">
        <a-button v-for="item in filterList"
                  size="large"
                  @click="taggerStatus(item)"
                  :key="item.id"
                  :type="filterStatus===item.id?'primary':'default'">
          {{item.title}}
        </a-button>
      </bm-control>
      <!--地图点-->
      <bm-marker v-for="item in mapList"
                 :key="item.id"
                 :icon="{url: item.clearStatus===0?mapIconWarning:item.clearStatus===1?mapIconSuccess:mapIconError, size: {width: 32, height: 32}}"
                 :position="{lat:item.lat,lng:item.lon}"
                 @click="infoWindowOpen(item)">
      </bm-marker>
      <!--详情弹框-->
      <bm-info-window :show="mapViewShow"
                      :position="{lng: mapView.lon, lat: mapView.lat}"
                      @close="infoWindowClose"
                      @open="infoOpen">
        <div class="map-info-box">
          <div><span>经营单位名称：</span>{{mapView.contractPartyA}}</div>
          <div><span>地址：</span>{{mapView.addr}}</div>
          <div><span>最后清洗日期：</span>{{new Date(mapView.finishDate).toLocaleString()}}</div>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import mapIconError from './../../assets/img/map_icon_error.png'
import mapIconSuccess from './../../assets/img/map_icon_success.png'
import mapIconWarning from './../../assets/img/map_icon_warning.png'
export default {
  name: "Map",
  data(){
    return {
      // center:{
      //   lng: 116.404,
      //   lat: 39.915,
      // },
      center:'上海',
      zoom:12,
      activeCity:'0',
      buttonList:[
        {
          title:'全部',
          id:'0',
        },
        {
          title:'南昌市',
          id:'360100',
        },
        {
          title:'景德镇市',
          id:'360200',
        },
        {
          title:'萍乡市',
          id:'360300',
        }, {
          title:'九江市',
          id:'360400',
        },
      ],
      filterStatus:'0',
      filterList:[
        {
          title:'全部',
          id:'0',
        },
        {
          title:'已清洗',
          id:'1',
        },
        {
          title:'已过期',
          id:'2',
        },
        {
          title:'即将过期',
          id:'3',
        },
      ],
      mapList:[
        {
          "id" : "AIC1607324622313",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000538",
          "contractTitle" : "郭守敬路集中空调通风系统",
          "contractPartyA" : "上海创环物业管理有限公司",
          "buildingCategory" : "商场办公综合楼",
          "addr" : "上海市 浦东新区 郭守敬路199号",
          "clearStatus" : 0,
          "finishDate" : 1592928000000,
          "setLonLatDate" : 1607270400000,
          "createTime" : 1607324622000,
          "updateTime" : 1607324622000,
          "lon" : 121.592547,
          "lat" : 31.209866,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622438",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000539",
          "contractTitle" : "上海浦东绿地铂骊酒店集中空调通风系统清洗项目",
          "contractPartyA" : "上海翔川绿地铂骊酒店管理有限公司",
          "buildingCategory" : "酒店、宾馆",
          "addr" : "上海市 浦东新区 川沙路5500号",
          "clearStatus" : 0,
          "finishDate" : 1580400000000,
          "setLonLatDate" : 1607270400000,
          "createTime" : 1607324622000,
          "updateTime" : 1607324622000,
          "lon" : 121.699409,
          "lat" : 31.184448,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622698",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000541",
          "contractTitle" : "上海花旗银行大厦集中空调通风系统清洗项目",
          "contractPartyA" : "上海花旗集团大厦物业管理有限公司",
          "buildingCategory" : "商务写字楼",
          "addr" : "上海市 浦东新区 花园石桥路33号",
          "clearStatus" : 1,
          "finishDate" : 1590681600000,
          "setLonLatDate" : 1607270400000,
          "createTime" : 1607324623000,
          "updateTime" : 1607324623000,
          "lon" : 121.500269,
          "lat" : 31.233754,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622833",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000542",
          "contractTitle" : "上海大华锦绣假日酒店集中空调通风系统清洗项目",
          "contractPartyA" : "上海锦华酒店管理有限公司",
          "buildingCategory" : "酒店、宾馆",
          "addr" : "上海市 浦东新区 北蔡镇锦尊路399号",
          "clearStatus" : 1,
          "finishDate" : 1603123200000,
          "setLonLatDate" : 1607270400000,
          "createTime" : 1607324623000,
          "updateTime" : 1607324623000,
          "lon" : 121.532907,
          "lat" : 31.180805,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622837",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000540",
          "contractTitle" : "阿斯利康集中空调通风系统清洗项目",
          "contractPartyA" : "上海纯恒环境科技有限公司",
          "buildingCategory" : "工厂",
          "addr" : "上海市 浦东新区 张江高科园亮景路245号",
          "clearStatus" : 2,
          "finishDate" : 1598716800000,
          "createTime" : 1607324623000,
          "updateTime" : 1607324623000,
          "lon" : 121.605801,
          "lat" : 31.203977,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622841",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000454",
          "contractTitle" : "上海皇廷花园酒店集中空调通风系统清洗项目",
          "contractPartyA" : "上海皇廷花园酒店有限公司",
          "buildingCategory" : "酒店、宾馆",
          "addr" : "上海市 浦东新区 华夏东路1539号",
          "clearStatus" : 2,
          "finishDate" : 1600531200000,
          "createTime" : 1607324623000,
          "updateTime" : 1607324623000,
          "lon" : 121.679853,
          "lat" : 31.198147,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        }, {
          "id" : "AIC1607324622963",
          "orgCode" : "ORG-0029",
          "airCode" : "ARC-000000000543",
          "contractTitle" : "上海皇廷国际大酒店集中空调通风系统清洗项目",
          "contractPartyA" : "上海皇廷国际大酒店有限公司",
          "buildingCategory" : "酒店、宾馆",
          "addr" : "上海市 浦东新区 绣川路998号",
          "clearStatus" : 0,
          "finishDate" : 1600531200000,
          "setLonLatDate" : 1607270400000,
          "createTime" : 1607324623000,
          "updateTime" : 1607324623000,
          "lon" : 121.707996,
          "lat" : 31.184581,
          "gpsLon" : 0.0,
          "gpsLat" : 0.0,
          "province" : "上海",
          "city" : "上海",
          "district" : "浦东新区"
        },
      ],
      mapViewShow:false,
      mapView:{},
      mapIconWarning,
      mapIconSuccess,
      mapIconError,
    }
  },
  created() {
    this.getData()
  },
  methods:{
    taggerCity({id}){
      this.activeCity = id;
      this.getData()
    },
    taggerStatus({id}){
      this.filterStatus = id;
      this.getData()
    },
    initMap(){

    },
    getData(){
      // this.$axios.get('/IOTAppSvc/airco/get_airco_clear_map_list?from=450&howmany=150&sort=id%2B&token=62e90032-94ec-4c36-9c94-0040f1c16238')
      // .then(res=>{
      //   console.log(res)
      // })
    },
    infoOpen(){
      this.mapViewShow = true;
    },
    infoWindowOpen(item){
      console.log(item)
      this.mapViewShow = true;
      this.mapView = item;
    },
    infoWindowClose(){
      this.mapViewShow = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.map-box{
  width: 100%;
  height: 100%;
  .map{
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.map{
  .anchorBL{
    display: none !important;
  }
  .map-btn{
    display: flex;
    flex-wrap: wrap;
    .ant-btn{
      margin: 20px 0 0 20px;
    }
  }
  .map-btn-filter{
    top: 90% !important;
  }
  .map-info-box{
    margin-right: 20px;
    >div{
      margin-bottom: 5px;
      span{
        font-weight: bolder;
      }
    }
  }
}
</style>